<div id="sidebar">
    <ul>
        <% if (site.customConfig.sentence == "on") { %>
            <li class="lite-item">
                <header class="lite-item-header">
                    <h3 class="lite-item-title"><i class="Card Card-hitokoto"></i>&nbsp;&#x4E00;&#x8A00;</h3>
                </header>
                <div class="textwidget">
                    <p>
                        <b id="hitokoto"></b>
                    </p>
                </div>
            </li>
            <%}%>
                <!--
                <li class="lite-item">
                    <header class="lite-item-header">
                        <h3 class="lite-item-title"><i class="Card Card-tags">&#x6807;&#x7B7E;</i></h3>
                    </header>
                    <div class="textwidget">
                        <% //site.tags.forEach(function(tag) { %>
                            <a href="<%//= tag.link%>" class="tag-cloud-link " style="font-size: 12px;margin: 5px; padding: 2px;">
                                <i class="fa fa-tags" aria-hidden="true"><%//= tag.name %></i>
                            </a>
                            <%// }); %>
                    </div>
                </li>-->
                <li class="lite-item">
                    <header class="lite-item-header">
                        <h3 class="lite-item-title"><i class="Card Card-tags">&#x6807;&#x7B7E;</i></h3>
                    </header>
                    <div class="textwidget">
                        <div id='tags' style="height: auto;width: 360;"></div>
                        <script src="<%= themeConfig.domain %>/media/js/svg3dtagcloud.min.js"></script>
                        <script>
                            $(document).ready(function() {
                                var entries = ([
                                    <%for (i = 0; i < site.tags.length; i++) { %>
                                    <%if(i==site.tags.length-1){%> {
                                        label: '🏷<%= site.tags[i].name %>',
                                        url: '<%= site.tags[i].link%>',
                                        target: '_button'
                                    }
                                    <%}else{%> {
                                        label: '🏷<%= site.tags[i].name %>',
                                        url: '<%= site.tags[i].link%>',
                                        target: '_button'
                                    },
                                    <%}%>
                                    <%}%>
                                ]);
                                var settings = {
                                    entries: entries, //数据
                                    width: 300, //宽度
                                    height: 300, //高度
                                    radius: '50%',
                                    radiusMin: 50,
                                    bgDraw: false, //是否显示背景
                                    bgColor: '#fff', //背景颜色
                                    opacityOver: 1.00,
                                    opacityOut: 0.05,
                                    opacitySpeed: 6,
                                    fov: 360,
                                    speed: 0.3, //旋转的速度
                                    fontFamily: 'Oswald, Arial, sans-serif',
                                    fontSize: '18', //默认字体大小
                                    fontColor: '#666', //默认字体颜色
                                    fontWeight: 'normal', //bold
                                    fontStyle: 'normal', //italic 
                                    fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                                    fontToUpperCase: true,
                                    tooltipFontFamily: 'Oswald, Arial, sans-serif',
                                    tooltipFontSize: '16',
                                    tooltipFontColor: 'red',
                                    tooltipFontWeight: 'normal', //bold
                                    tooltipFontStyle: 'normal', //italic 
                                    tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                                    tooltipFontToUpperCase: false,
                                    tooltipTextAnchor: 'left',
                                    tooltipDiffX: 0,
                                    tooltipDiffY: 5

                                };

                                //var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
                                $('#tags').svg3DTagCloud(settings);
                            });
                        </script>
                    </div>
                </li>
                <% if (site.customConfig.music == "on") { %>
                    <script src="https://cdn.jsdelivr.net/gh/itjoker233/Gridea-theme-Chic/assets/media/script/APlayer.min.js"></script>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
                    <div id="player"></div>
                    <% if(site.customConfig.music_model == "normal"){%>
                        <li class="lite-item">
                            <header class="lite-item-header">
                                <h3 class="lite-item-title">
                                    &#x1F3B5;&#x97F3;&#x4E50;
                                </h3>
                            </header>
                            <div class="textwidget">
                                <p>
                                    <div id="playerbox"></div>
                                </p>
                            </div>
                        </li>
                        <%}%>
                            <script>
                                function LoadPlayer() {
                                    var music_array = [];
                                    <%site.customConfig.musics.forEach(function(music_item) { %>
                                    music_array.push({
                                        name: '<%=music_item.name%>',
                                        url: '<%=music_item.url%>',
                                        artist: '<%=music_item.author%>',
                                        cover: '<%=music_item.pic%>',
                                    });
                                    <%}); %>
                                    <% if (site.customConfig.music_model == "fixed") { %>
                                    const ap = new APlayer({
                                        container: document.getElementById('player'),
                                        fixed: true,
                                        audio: music_array
                                    });
                                    <% } else if(site.customConfig.music_model == "mini"){%>
                                    const ap = new APlayer({
                                        container: document.getElementById('player'),
                                        mini: true,
                                        audio: music_array
                                    });
                                    <%}else{%>
                                    const ap = new APlayer({
                                        container: document.getElementById('playerbox'),
                                        audio: music_array
                                    });
                                    <%}%>
                                }
                                LoadPlayer();
                            </script>
                            <% } %>
                                <%/*sidebar*/%>
                                    <% if (site.customConfig.sidebars) { %>
                                        <% site.customConfig.sidebars.forEach(function(sidebar) { %>
                                            <li class="lite-item">
                                                <header class="lite-item-header">
                                                    <h3 class="lite-item-title">
                                                        <%-sidebar.title%>
                                                    </h3>
                                                </header>
                                                <div class="textwidget">
                                                    <div id="textwidget-box" style="width:100%; height:auto;">
                                                        <%-sidebar.content%>
                                                    </div>
                                                </div>
                                            </li>
                                            <% }); %>
                                                <% } %>
                                                    <li class="lite-item">
                                                        <header class="lite-item-header">
                                                            <h3 class="lite-item-title">&#x1F468;&#x200D;&#x1F4BB;&#x53CB;&#x94FE;</h3>
                                                        </header>
                                                        <div class="textwidget">
                                                            <% if (site.customConfig.friends) { %>
                                                                <% site.customConfig.friends.forEach(function(friend) { %>
                                                                    <p onclick="javascript:top.location='<%= friend.siteLink %>'"><span class="link_a"><a href="<%= friend.siteLink %>" alt="<%= friend.siteName %> "><%= friend.siteName %> -<%= friend.description %></a></span></p>

                                                                    <% }); %>
                                                                        <% } %>
                                                        </div>
                                                    </li>
    </ul>
</div>